<template>
  <div class="main" v-if="store.state.client && store.state.client.Modules">
    <div class="window-item" v-if="isShowHandler('查询')" @click="selectBizType('查询')">
      <div><i class="iconfont icon-chaxun item-icon"></i></div>
      <div class="item-text">查询</div>
    </div>
    <div class="window-item blinking-button" v-if="isShowHandler('挂号')" @click="selectBizType('挂号')">
      <div><i class="iconfont icon-fangkong item-icon"></i></div>
      <div class="item-text">挂号</div>
    </div>
    <div class="window-item" v-if="isShowHandler('建档')" @click="selectBizType('建档')">
      <div><i class="iconfont icon-fangkong item-icon"></i></div>
      <div class="item-text">建档</div>
    </div>
    <div class="window-item" v-if="isShowHandler('缴费')" @click="selectBizType('缴费')">
      <div><i class="iconfont icon-jiaofei item-icon"></i></div>
      <div class="item-text">缴费</div>
    </div>
    <div class="window-item" v-if="isShowHandler('充值')" @click="selectBizType('充值')">
      <div><i class="iconfont icon-cunkuan item-icon"></i></div>
      <div class="item-text">充值</div>
    </div>
    <div class="window-item" v-if="isShowHandler('签到')" @click="selectBizType('签到')">
      <div class="badge" v-if="sign">{{sign}}</div>
      <div><i class="iconfont icon-fangkong item-icon"></i></div>
      <div class="item-text">已预约签到</div>
    </div>
    <div class="shoushi"><i class="iconfont icon-anzhu item-icon"></i></div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ReservationMixin from '@/mixins/reservation'

@Component
export default class PortraitHome extends mixins(ReservationMixin) {
  private async mounted () {
    this.setTip('请选择您要办理的业务')
    this.setMaxTime(30)
    this.updateTimeHandler('home')
    this.updateSign()
  }

  /**
   * 更新签到数量
   */
  private updateSign () {
    this.sign = this.store.state.reservationList?.length ?? 0
    const handler = window.setTimeout(() => {
      this.updateSign()
    }, 1000)
    this.handlers.push(handler)
  }

  private isShowHandler (name: string) {
    return this.store.state.client.Modules.findIndex(e => e.Name === name && e.IsEnable === '是') >= 0
  }

  private sign = 0
  private selectBizType (bizType: '查询' | '充值' | '缴费' | '建档' | '签到' | '挂号' | '回诊') {
    if (!this.store.state.patient) {
      this.logger.warning(`尝试进行${bizType}业务, 但是没有查询到用户档案信息`)
      this.$messageBox.show({
        content: '没有查询到您的档案信息, 请稍后重试.',
        confirm: () => {
          this.home()
        },
        cancel: () => {
          this.home()
        }
      })
      return
    }
    if (bizType === '签到') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/sign`)
      return
    }
    if (bizType === '挂号') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/doctor`)
      return
    }
    if (bizType === '查询') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/detail`)
      return
    }
    if (bizType === '充值') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/add-input`)
      return
    }
    this.$messageBox.show({ content: `${bizType}功能暂不可用, 请稍后重试`, confirm: async () => { await this.$sleep(5000) } })
  }
}
</script>

<style scoped>
  .shoushi{
    font-size: 4rem;
    color: #2c3e50;
    position: absolute;
    bottom: 140px;
    animation: bshow 1s linear infinite; /* 应用闪烁动画 */
  }
  .main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
  }
  .window-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 30rem;
    height: 35rem;
    background-color: #388cc1;
    margin: 2rem;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 5rem;
    position: relative;
    color: white;
  }
  .badge{
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    background: red;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    border-radius: 15px;
  }
  .item-icon {
    font-size: 12rem;
  }
  .item-text {
    margin-top: 3rem;
  }
  /* CSS动画，实现闪烁效果 */
  @keyframes blink {
    0%,
    100% {
      background-color: rgba(56, 140, 193, 0.7)
    }
    50% {
      background-color: rgba(56, 140, 193, 1)
    }
  }

    /* CSS动画，实现闪烁效果 */
  @keyframes bshow {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

  /* 为按钮添加基本样式和动画 */
  .blinking-button {
    animation: blink 1s linear infinite; /* 应用闪烁动画 */
  }

  /* 鼠标悬停时取消闪烁动画 */
  .blinking-button:hover {
    animation: none;
  }
</style>
